<template>
  <div class="discover">
    <Navi :title="this.$route.params.name1" :flexd="true" />
    <div class="list">
      <div class="product" v-for="(item,index) in list.link" :key="index" @click="viewAudio(item.id)">
        <div class="img-box">
          <img
            class="auto-img"
            :src="'https://imagev2.xmcdn.com/' + item.cover"
            alt=""
          />
        </div>
        <div class="textbox">
          <div class="product-name one-text">
            {{ item.title }}
          </div>
          <div class="product-enname one-text">
            {{
              item.customTitle
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Tomatoes",
  components: {
    Navi,
  },
  data() {
    return {
      url: "https://imagev2.xmcdn.com/",
      list: {
        link: []
      },
    };
  },
  created() {
    this.link = this.$route.params.link;
    this.gettou(this.link);
  },
  methods: {
    gettou(link) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/index/queryCategoryFeed?" + link,
      })
        .then((result) => {
        this.$toast("加载完成");
        result.data.data.materials.forEach(v=>{     
            this.list.link.push(v.data.albumInfo);
        })

        })
        .catch((err) => {
          
        });
    },
    viewAudio(trackid) {
      this.$router.push({ name: "Audio", params: { trackid } });
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  .product {
    width: 100%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .img-box {
      width: 72px;
    }
    .textbox {
      width: 283px;
      height: 100%;
      background-color: #f5f5f5;
      padding: 0 0 0 10px;
      box-sizing: border-box;
      .product-name {
        width: 100%;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
      .product-enname {
        width: 100%;
        font-size: 14px;
        color: #333;
        margin-top: 10px;
      }
    }
  }
}
</style>